<div class="w12 top_screening" style="z-index: 1">
  <ul class="scr_nav">
    <li class="w04 scr_nav_item" (click)="swipeDate(-1)" [class.hide]="date_type == 0 || date_type == 2">{{ dates[0]
      }}
    </li>
    <li class="w04 scr_nav_item xuan font_weight_bold" (click)="chooseDate()"
        [class.hide]="date_type == 0 || date_type == 2">{{ dates[1] }}
    </li>
    <li class="w04 scr_nav_item" (click)="swipeDate(1)" [class.hide]="date_type == 0 || date_type == 2">{{ dates[2] }}
    </li>
    <li class="w12 scr_nav_item xuan font_weight_bold" [class.hide]="!(date_type == 0 || date_type == 2)"
        (click)="chooseDate()">{{ (dates[0] || "") + " "+ ("至")+ " "+ (dates[1] || "") }}
    </li>
    <i class="position_a right0 lh40 w01 tc fa fa-angle-down ml5" (click)="changeStateDateType()"></i>
  </ul>
  <div class="scr_main position_a mt45" [class.hide]="state.date_type" (click)="this.state.date_type = true">
    <div class="scr_main_list tc">
      <ul>
        <li [class.font_blue]="date_type == 1" [class.font_weight_bold]="date_type == 1" (click)="changeDateType(1)">{{
          '日' }}
        </li>
        <li [class.font_blue]="date_type == 2" [class.font_weight_bold]="date_type == 2" (click)="changeDateType(2)">{{
          '周' }}
        </li>
        <li [class.font_blue]="date_type == 3" [class.font_weight_bold]="date_type == 3" (click)="changeDateType(3)">{{
          '月' }}
        </li>
        <li [class.font_blue]="date_type == 4" [class.font_weight_bold]="date_type == 4" (click)="changeDateType(4)">{{
          '年' }}
        </li>
        <li [class.font_blue]="date_type == 0" [class.font_weight_bold]="date_type == 0" (click)="changeDateType(0)">{{
          '自定义'  }}
        </li>
      </ul>
    </div>
  </div>
  <div class="scr_main position_a mt45" #calendar [class.hide]="state.week_type" (click)="this.state.week_type = true">
    <div class="scr_main_calender tc pb10" (click)="$event.stopPropagation();">
      <div class="w12 bor_bottom">
        <i class="w01 lh40 font_size_super fa fa-angle-double-left" (click)="setCurrentYear(-1)"></i>
        <i class="w01 lh40 font_size_super fa fa-angle-left" (click)="setCurrentMonth(-1)"></i>
        <div class="w08 lh40">
          {{ CURRENT.year }}{{ '年'  }}
          {{ CURRENT.month + "月"  }}
        </div>
        <i class="w01 lh40 font_size_super fa fa-angle-right" (click)="setCurrentMonth(1)"></i>
        <i class="w01 lh40 font_size_super fa fa-angle-double-right" (click)="setCurrentYear(1)"></i>
      </div>
      <ul class="font_weight_bold">
        <li class="pl5 pr5">
          <div>{{ '日'  }}</div>
        </li>
        <li class="pl5 pr5">
          <div>{{ '一'  }}</div>
        </li>
        <li class="pl5 pr5">
          <div>{{ '二'  }}</div>
        </li>
        <li class="pl5 pr5">
          <div>{{ '三'  }}</div>
        </li>
        <li class="pl5 pr5">
          <div>{{ '四'  }}</div>
        </li>
        <li class="pl5 pr5">
          <div>{{ '五'  }}</div>
        </li>
        <li class="pl5 pr5">
          <div>{{ '六'  }}</div>
        </li>
      </ul>
      <ng-container *ngFor="let ITEM1 of WEEK;let i=index">
        <ul [class.xuan]="mode=='week' && dates[0].indexOf(ITEM1[0].key) == 0">
          <ng-container *ngFor="let ITEM2 of ITEM1; let j=index;">
            <li
              [class.xuan]="(mode=='radio' && dates[1] == ITEM2.key) || (mode=='multi' && dates[0] <= ITEM2.key && (dates[1] == undefined? dates[0] == ITEM2.key: dates[1]>= ITEM2.key))"
              [class.font_gray]="ITEM2.key.indexOf(CURRENT.year+'-'+(CURRENT.month<10? '0': '')+CURRENT.month) != 0"
              (click)="selectDate(ITEM2)">
              <div>{{ ITEM2.value }}</div>
            </li>
          </ng-container>
        </ul>
      </ng-container>
    </div>
  </div>
</div>
